<template>
	<view class="content">
		<uni-nav-bar @clickLeft="toback" backgroundColor="#ffffff" left-icon="back" color="#15151B"
			:fixed="true" :statusBar="true" :border="false" title="注册账号"></uni-nav-bar>
		<!-- <view class="title">
			<text>注册账号</text>
		</view> -->
		<view class="retip">
			注册账号需要完成两步
		</view>
		
		<view class="add-bagtop">
			<view class="yzone">
				一，验证短信
			</view>
			<view class="bag-top">
				<view class="set-li">
					<view class="set-li-l">
						<view class="set-li-img">
							<image src="/static/image/login/phone.png" mode=""></image>
						</view>
					</view>
					<view class="set-li-r">
						<view class="set-txt2">
							<input type="number" placeholder-style="color:#999999;font-size:34rpx" v-model="tel"
								placeholder="+86 请输入您的手机号" />
						</view>
					</view>
				</view>
				<!-- <view class="tips">账号是纯字母，或者数字，或字母和数字的组合，不能包含特殊字符</view> -->
				<view class="set-li">
					<view class="set-li-l">
						<view class="set-li-img">
							<image src="/static/image/login/tuxin.png" mode=""></image>
						</view>
					</view>
					<view class="set-li-r">
						<view class="set-txt2">
							<input type="number" placeholder-style="color:#999999;font-size:34rpx" v-model="captchcode1"
								placeholder="请输入图形验证码" />
						</view>
					</view>
					<view class="tuxin" @click="getCaptcha1">
						<image :src="'data:image/jpeg;base64,'+tuxin1" mode="" class="tuxin1"></image>
						<image src="/static/image/login/refresh.png" mode="" class="tuxin2"></image>
					</view>
				</view>
				<view class="set-li">
					<view class="set-li-l">
						<view class="set-li-img">
							<image src="/static/image/login/sms.png" mode=""></image>
						</view>
					</view>
					<view class="set-li-r">
						<view class="set-txt2">
							<input type="number" placeholder-style="color:#999999;font-size:34rpx" v-model="code"
								placeholder="请输入验证码" />
						</view>
					</view>
					<view class="ma" @click="getMa()">{{txt}}</view>
				</view>
			</view>
			<view class="yztwo">
				二，设置密码
			</view>
			<view class="bag-top">
				<view class="set-li">
					<view class="set-li-l">
						<view class="set-li-img">
							<image src="/static/image/login/pwd.png" mode=""></image>
						</view>
					</view>
					<view class="set-li-r">
						<view class="set-txt2">
							<input type="password" placeholder-style="color:#999999;font-size:34rpx" v-model="pwd"
								placeholder="请输入密码" />
						</view>
					</view>
				</view>
				<view class="set-li">
					<view class="set-li-l">
						<view class="set-li-img">
							<image src="/static/image/login/pwd.png" mode=""></image>
						</view>
					</view>
					<view class="set-li-r">
						<view class="set-txt2">
							<input type="password" placeholder-style="color:#999999;font-size:34rpx" v-model="pwd2"
								placeholder="确认密码" />
						</view>
					</view>
				</view>
				<view class="set-li">
					<view class="set-li-l">
						<view class="set-li-img">
							<image src="/static/image/login/tuxin.png" mode=""></image>
						</view>
					</view>
					<view class="set-li-r">
						<view class="set-txt2">
							<input type="number" placeholder-style="color:#999999;font-size:34rpx" v-model="captchcode2"
								placeholder="请输入图形验证码" />
						</view>
					</view>
					<view class="tuxin" @click="getCaptcha2">
						<image :src="'data:image/jpeg;base64,'+tuxin2" mode="" class="tuxin1"></image>
						<image src="/static/image/login/refresh.png" mode="" class="tuxin2"></image>
					</view>
				</view>
			</view>
			<view class="smstip">
				*短信验证保障账户安全的同时短信费用将由平台支付
			</view>
			<view class="btn1" @click="toreg()">
				<text>注册并登陆</text>
			</view>
			<view class="tip">
				<view @click="toback">
					已有账号？<text>返回登录 </text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Config from '@/common/js/config.js';
	import md5 from '@/common/js/md5.js';
	export default {
		data() {
			return {
				Captcha1: [],
				Captcha2: [],
				tuxin1: '',
				tuxin2: '',
				tel: '',
				pwd: '',
				pwd2: '',
				code: '',
				captchcode1: '',
				captchcode2: '',
				txt: '获取验证码',
				timer: null,
				time: 60,
			};
		},
		onLoad() {
			this.getCaptcha1();
			this.getCaptcha2();
		},
		methods: {
			getCaptcha1(){
				this.$api.sendRequest({
					data:{
						service:'Captcha.get_captcha',
						width:110,
						height:40,
					},
					success: res => {
						if(res.data.code == 0){
							var param = res.data.info;
							this.Captcha1 = param;
							this.tuxin1 = param.imgData;
						}
					}
				});
			},
			getCaptcha2(){
				this.$api.sendRequest({
					data:{
						service:'Captcha.get_captcha',
						width:110,
						height:40,
					},
					success: res => {
						if(res.data.code == 0){
							var param = res.data.info;
							this.Captcha2 = param;
							this.tuxin2 = param.imgData;
						}
					}
				});
			},
			toback() {
				uni.redirectTo({
					url: "/pages/login/login",
				})
			},
			setTime() {
				var that = this;
				this.timer = setInterval(() => {
					if (Number(that.time) == 0) {
						that.txt = "获取验证码";
						that.time = 60;
						clearInterval(that.timer);
						that.timer = null;
					} else {
						var s = Number(that.time) - 1;
						that.txt = '重新获取('+ s + 's)';
						that.time--;
					}
				}, 1000)
			},
			getMa() {
				let phone = /^1[0-9]{10}$/;
				if (!this.tel) {
					uni.showToast({
						title: '请输入您的手机号',
						icon: "none"
					})
					return
				} else {
					if (!phone.test(this.tel)) {
						uni.showToast({
							title: '请输入正确的手机号码',
							icon: 'none'
						})
						return
					} else {
						// console.log(1)
					}
				}
				if (!this.captchcode1) {
					uni.showToast({
						title: '请输入图形验证码',
						icon: "none"
					})
					return
				}
				let sign = md5('mobile=' + this.tel + '&' + Config.sign_key);
				this.$api.sendRequest({
					data: {
						service: 'Login.getCode',
						mobile: this.tel,
						captchaId: this.Captcha1.captchaId,
						captchcode: this.captchcode1,
						country_code: 86,
						sign: sign,
					},
					success: res => {
						if (res.data.code == 0) {
							uni.showToast({
								icon: "none",
								title: res.data.msg,
							});
							this.setTime();
						} else {
							var msg = res.msg == '' ? res.data.msg : res.msg;
							uni.showToast({
								icon: "none",
								title: msg,
							});
							return false;
						}
			
					}
				});
			},
			toreg() {
				if (this.tel == "") {
					uni.showToast({
						icon: "none",
						title: "请输入手机号",
					});
					return false;
				}
				if (this.code == "") {
					uni.showToast({
						icon: "none",
						title: "请输入验证码",
					});
					return false;
				}
				if (this.pwd == "") {
					uni.showToast({
						icon: "none",
						title: "请输入密码",
					});
					return false;
				}
				if (this.pwd2 == "") {
					uni.showToast({
						icon: "none",
						title: "请输入确认密码",
					});
					return false;
				}
				if (this.pwd != this.pwd2) {
					uni.showToast({
						icon: "none",
						title: "密码与确认密码不一致",
					});
					return false;
				}
				if (this.captchcode2 == "") {
					uni.showToast({
						icon: "none",
						title: "请输入图形验证码",
					});
					return false;
				}
				this.$api.sendRequest({
					data:{
						service:'Login.userReg',
						captchaId:this.Captcha2.captchaId,
						captchcode:this.captchcode2,
						user_login:this.tel,
						user_pass:this.pwd,
						user_pass2:this.pwd2,
						code:this.code,
						source:'h5',
						device:uni.getSystemInfoSync()['deviceId'],
					},
					success: res => {
						if(res.data.code == 0){
							uni.showToast({
								icon: "none",
								title: res.data.msg,
							});
							setTimeout(() => {
								uni.redirectTo({
									url: "/pages/login/login",
								})
							}, 1000);
						}else{
							var msg = res.msg == '' ? res.data.msg : res.msg;
							uni.showToast({
								icon: "none",
								title: msg,
							});
							return false;
						}
						
					}
				});
			},
			go(e) {
				uni.redirectTo({
					url: e
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #ffffff;
		.title {
			margin-top: 50rpx;
			margin-left: 40rpx;
			text {
				color: #3D3D3D;
				font-size: 48rpx;
			}
		}
		.retip{
			background-color: #c594fe;
			color: #FFFFFF;
			font-size: 26rpx;
			text-align: center;
			padding: 10rpx 0;
		}
		.add-bagtop {
			border-radius: 20rpx;
			padding-top: 40rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 750rpx;
			margin: auto;
			margin-left: auto;
			position: relative;
			.yzone,.yztwo{
				background-image: linear-gradient(
					  270deg,
					  rgba(96, 195, 254, 1) 0,
					  rgba(197, 148, 254, 1) 100%
					);
				color: #FFFFFF;
				display: inline-block;
				padding: 6rpx 10rpx;
			}
			.yztwo{
				margin-top: 40rpx;
			}
			.bag-top {
				width: 700rpx;
				position: relative;
				// margin: 40rpx auto;
				margin:  auto;
				.tips{
					color: #999999;
					font-size: 20rpx;
				}
				.set-li:first-child{
					// margin-bottom: 0 !important;
					    border-top: 2rpx solid #e8e3e3;
				}
				.set-li {
					display: flex;
					justify-content: space-between;
					// padding: 40rpx 0;
					height: 130rpx;
					// margin: 60rpx 0;
					align-items: center;
					border-bottom: 2rpx solid #e8e3e3;
					.ma {
						color: #c594fe;
					}
				    .set-li-l {
				    	display: flex;
				    	align-items: center;
				    	// border-right: 1px solid #B8B8B8fff;
				    	// width: 150rpx;
				    	.set-li-img {
				    		width: 50rpx;
				    		height: 50rpx;
				    		margin-right: 20rpx;
				    
				    		image {
				    			height: 100%;
				    			width: 100%;
				    		}
				    	}
				    
				    	.set-txt {
				    		font-size: 28rpx;
				    		color: #000000;
				    	}
				    }
					.set-li-r {
						flex: 1;
						.set-txt2 {
							input{
								font-size: 34rpx;
							}
							margin-right: 10rpx;
						}
					}
					.tuxin{
						height: 80rpx;
						display: flex;
						align-items: center;
						.tuxin1{
							width: 200rpx;
							height: 80rpx;
							margin-right: 8rpx;
						}
						.tuxin2{
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
			
			.tip{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 24rpx;
				padding: 60rpx 20rpx;
				text {
					color: #666666;
				}
			}
			.smstip{
				margin-top: 20rpx;
				text-align: center;
				font-size: 24rpx;
				color: #999999;
			}
			.btn1 {
				width: 660rpx;
				height: 90rpx;
				background-image: linear-gradient(
				      270deg,
				      rgba(96, 195, 254, 1) 0,
				      rgba(197, 148, 254, 1) 100%
				    );
				border-radius: 16rpx;
				text-align: center;
				line-height: 90rpx;
				margin: 0 auto;
				margin-top: 60rpx;
			
				text {
					font-size: 34rpx;
					color: #FFFFFF;
					letter-spacing: 6rpx;
				}
			}
		}
	}
	

	
</style>

	
	

	

	
</style>
